<template>
    <div class="main">
        <el-container>
            <el-header style="height: 80px">
                <div class="headTitle">
                    <h1>光影阁后台管理系统</h1>
                </div>
                <div class="headerImg">
                    <el-dropdown placement="bottom" trigger="click">
                        <el-avatar
                                :size="56"
                                :src="headerImg==''?'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png':headerImg">
                        </el-avatar>
                        <el-dropdown-menu slot="dropdown">
                            <el-popconfirm
                                    confirm-button-text='确定'
                                    cancel-button-text='不用了'
                                    icon="el-icon-info"
                                    icon-color="red"
                                    title="你确定要退出吗？" @confirm="loginOut">
                                <el-dropdown-item slot="reference" icon="el-icon-switch-button">退出登录</el-dropdown-item>
                            </el-popconfirm>

                            <el-dropdown-item icon="el-icon-unlock">修改密码</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu
                            class="el-menu-vertical-demo"
                            background-color="#303133"
                            text-color="#fff"
                            active-text-color="#ffd04b"
                            router>
                        <!--一级菜单-->
                        <el-submenu
                            v-for="menu in menuList"
                            :key="menu.pid"
                            :index="menu.pid+''">
                            <template slot="title">
                                <i :class="menu.icon"></i>
                                <span>{{menu.title}}</span>
                            </template>
                                <!--二级菜单-->
                                <el-menu-item
                                    @click="addTopNavMenu(menuTwo)"
                                    v-for="menuTwo in menu.children"
                                    :index="menuTwo.path">
                                    <i :class="menuTwo.icon"></i>
                                    {{menuTwo.title}}
                                </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
<!--                    <TopNavMenu></TopNavMenu>-->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>

    </div>
</template>

<script>
import TopNavMenu from "../components/TopNavMenu";

export default {
        name: "Main",
        data(){
            return {
                menuList:[]
            }
        },
        methods:{
           async getMenuList(){
               const{data:res}=await this.$http.get("/purview/getMenuList")
               this.menuList=res.data
            },
            addTopNavMenu(menuTwo){
                this.$store.commit("addTopNavMenu",menuTwo)
            },
            loginOut(){
               this.$router.push("/login")
            },
            //跳转欢迎界面
            skipWelcomePage(){
              this.$router.push("/welcome")
            }
        },
        created() {
            this.getMenuList();
            this.skipWelcomePage();
        },
        computed:{
            headerImg(){
               const headerImgKey= sessionStorage.getItem("username")
                var cookieArr= document.cookie.split(";")
                for (var i=0;i<cookieArr.length;i++){
                    var keyName=cookieArr[i].substring(0,cookieArr[i].indexOf('='))
                    var valName=cookieArr[i].substring(cookieArr[i].indexOf('=')+1)
                    if (keyName.trim()===headerImgKey){
                        this.$store.commit('setHeaderImg',valName)
                        return valName
                    }
                }
                return ''
            },

        },
       components:{
            TopNavMenu
       }
    }
</script>

<style scoped>
    .main{
        width: 100%;
        height: 100%;
        padding: 0;
    }
    .headTitle{
        line-height: 50%;
        font-size: 25px;
        margin-left: 40%;
        float: left;
    }
    .headTitle h1{
      color:#ffffff; /*设置文字颜色*/
      font-size:50px; /*设置字体大小*/
      font-weight:bolder; /*设置字体粗细*/
      -webkit-animation: flicker 2s infinite;    /*设置动画*/
    }
    @-webkit-keyframes flicker{                    /*创建动画*/
      0%{
        opacity: 1;
      }
      50%{
        opacity: 0.5;
      }
      100%{
        opacity: 1;
      }
    }
    .el-avatar{
        margin-left: 400px;
        margin-top: 10px;
    }
    .el-menu-vertical-demo{
        height: 100%;
        border: none;
    }
    .el-container{
        width: 100%;
        height: 100%;
        padding: 0;
        border: none;
    }
    .el-header{
        background-color: #FFc300
    ;
        height: 100px;
    }
    .el-aside{
        height: 100%;
    }
    .el-main{
        height: 100%;
        background-color: gainsboro;
    }
    .el-dropdown-menu{
        transform: translateX(205px);
    }

</style>
